<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="cu-list menu">
				<view class="cu-item arrow">
					<view class="content">
						<!-- <text class="cuIcon-circlefill text-grey"></text> -->
						<text class="text-grey">当前省市</text>
					</view>
					<view class="action">
						<uni-citys :city="area" @cityPicker='cityPicker'></uni-citys>
						<!-- <text class="text-grey text-sm" @tap="openAddres">{{area}}</text> -->
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">上年度缴纳生育保险的基数</text>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="10" v-model="basePay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">生育保险连续缴纳月份数</text>
					</view>
					<view class="action"><input class="input" type="number" :maxlength="4" v-model="month"
						placeholder="请输入" placeholder-class="placeholder" /></view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">产前检查医院</text>
					</view>
					<view class="action">
						<picker @change="hChange" :value="hIndex" :range="hPicker">
							<view class="picker input">
								{{hIndex>-1?hPicker[hIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">生育方式</text>
					</view>
					<view class="action">
						<picker @change="bChange" :value="bIndex" :range="bPicker">
							<view class="picker input">
								{{bIndex>-1?bPicker[bIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">应享受产假天数</text>
					</view>
					<view class="action">
						<view class="action">
							<input class="input" type="number" :maxlength="4" v-model="days"
							placeholder="请输入" placeholder-class="placeholder" />
						</view>
					</view>
				</view>
				<view class="cu-item bottom">
					<view class="content">
						<view class="cu-btn round bg-blue" @tap="getResult()">查看测算结果</view>
					</view>
				</view>
			</view>

		</scroll-view>
		
		<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				
				<view class="cu-list menu text-left solid-top" style="height: 350px;margin: 0;">
					<view class="cu-item">
						<view class="content">
							<view class="text-blue" style="justify-content: center;">生育保险测算结果</view>
						</view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey ">产前检查报销</text>
						</view>
						<view class="action"><text class="text-grey  text-sm">约{{resultList.inspect}}元</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey">住院费报销</text>
						</view>
						<view class="action"><text class="text-grey text-sm">约{{resultList.cost}}元</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey">生育津贴报销</text>
						</view>
						<view class="action"><text class="text-grey text-sm">约{{resultList.fertility}}元</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-black">报销合计</text>
						</view>
						<view class="action"><text class="text-red text-sm">约{{resultList.total}}元</text></view>
					</view>
					<view class="cu-item block" style="margin-top: 20px;">
						<view class="content">
						<view class="text-red">测算结果只作参考</view>
						<view class="cu-btn bg-blue round recount" style="margin: 0 15%;width: 70%;" @click="hideModal">重新测算</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 绑定 -->
	<goReg 
		ref="goReg" 
		:contentHeight="580"
	></goReg>
	</view>
</template>

<script>
	import uniCitys from '@/components/citys-picker/uni-citys.vue';
	import goReg from "@/components/goReg";
	export default {
		components: {
			uniCitys,
			goReg,
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				resultList: '',
				basePay: '',
				month: '',
				days: '',
				hIndex:-1,
				bIndex:-1,
				hPicker: ['一级医院', '二级医院','三级医院'],
				bPicker: [ '顺产','破腹产'],
				area:'请选择',
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		methods: {
			goPage(page){
				uni.navigateTo({
					url: page
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			hChange(e) {
				this.hIndex = e.detail.value
			},
			bChange(e) {
				this.bIndex = e.detail.value
			},
			openAddres() {
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				// this.pickerText = JSON.stringify(e);
				let labelArr = e.labelArr;
				let city = labelArr[1]=="市辖区"?labelArr[0]:labelArr[1];
				this.area = city;
				console.log(e )
			},
			async getResult(){
				// let uId = uni.getStorageSync('userId');
				let uId =1
				if(uId>"0"&&uId!=undefined){
					let errMsg = '';
					if(this.bIndex<0)errMsg = '请选择生育方式';
					if(this.hIndex<0)errMsg = '请选择产前检查医院';
					if(this.days<='')errMsg = '请填写应享受产假天数';
					if(this.month<=0)errMsg = '请填写生育保险连续缴纳月份数';
					if(this.basePay<=0)errMsg = '请填写上年度缴纳生育保险的基数';
					if(this.area=='')errMsg = '请选择当前城市';
					if(errMsg){
						uni.showToast({
							title:errMsg,
							icon:'none',
						});
						return;
					}
					
					let param = {city:this.area,base:this.basePay,month:this.month,type:parseInt(this.hIndex)+1,way:parseInt(this.bIndex)+1,day:this.days};
					let data = await this.$http.post(
						'fertility', //可以直接放链接(将不启用全局定义域名)
						param, 
					);
					this.resultList = data;
					console.log(data);
					this.modalName = 'gridModal';
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			cityPicker(val){
				 this.area=val.city;
			},
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
		background: #F6F6F6;
		
		
	}
	.cu-btn{
		height: 80rpx ;
		width: 80%;
		margin: 0 10%;
		box-shadow: 0px 3px 6px #4CA5FE;
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 10px;
		background: transparent;
		margin-left: -10px;
		padding: 0;
		
	}
	.cu-list{
		height: 375px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 1;
		border-radius: 10px;
		margin: 20px 10px;
	}
	.page.show {
		overflow: hidden;
	}
	.input{
		text-align: right;
		font-size: 12px;
	}
	.recount{
		width: 100%;
		margin-bottom: 5px;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
